<template>
<div class="site-settings views-container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
  <div class="wlm-form">
    <div class="wlm-form-header">站点</div>
    <div class="wlm-form-content">
      <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right" width="500">
        <el-form-item label="站点状态">
          <el-radio-group v-model="formFormatData.formData.sitestatus" @change="formFormatConfirm">
            <el-radio label="1">打开</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关闭原因" prop="closeReson" v-if="formFormatData.formData.sitestatus === '0'">
          <el-input type="textarea" :rows="3"  v-model="formFormatData.formData.closeReson"></el-input>
        </el-form-item>
        <el-form-item label="平台LOGO" prop="logo">
          <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
        </el-form-item>
        <el-form-item label="站点名称" prop="sitename">
          <el-input  v-model="formFormatData.formData.sitename"></el-input>
        </el-form-item>
        <el-form-item label="网站图标" prop="bgimg">
          <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
        </el-form-item>
        <!-- <el-form-item label="网站关键字" >
          <el-input v-model.trim="formFormatData.formData.keyword" placeholder="请输入平台名称">
          </el-input>
        </el-form-item>
        <el-form-item label="网站描述">
          <el-input v-model="formFormatData.formData.content"></el-input>
        </el-form-item> -->
        <el-form-item label="版权模式">
          <el-radio-group v-model="formFormatData.formData.pattern">
            <el-radio label="1">强制</el-radio>
            <el-radio label="2">非强制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网站版权" prop="copyright">
        <div style="color:red;font-size:25px;">上传图片高度请在50px以下</div>
           <ueditor :ueditorChange="agreenInfoChange" :defaultMsg='defaultMsg' :config='{initialFrameWidth: null,initialFrameHeight: 350}' ref="by_know"></ueditor>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
    <el-button size="small" @click="saveForm" type="primary">保存</el-button>
  </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import {
  setData,
  siteSet
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'SiteSettings',
  components: {
    ChooseFiles,
    ueditor
  },
  data() {
    // var checkImg = (rule, value, callback) => {
    //   const val = this.formFormatData.formData[rule.field]
    //   if (val === '') {
    //     return callback(new Error('请添加图片'))
    //   } else {
    //     callback()
    //   }
    // }
    var checkImg = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      if (!Array.isArray(val) || (Array.isArray(val) && val.length === 0)) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      defaultMsg: '',
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'logo',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'bgimg',
          model: 'img',
          validateField: 'businessbackgroundmap'
        }
      },
      formFormatData: {
        key: 'SiteSettings',
        api: {
          editForm: {
            api: setData,
            params: {
              key: 'siteSet',
              always: true
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
          },
          submitForm: siteSet
        },
        formData: {
          key: 'siteSet',
          sitestatus: '1',
          pattern: '2',
          closeReson: '',
          sitename: '',
          logo: '',
          bgimg: '',
          content: '',
          keyword: '',
          copyright: ''
        },
        rules: {
          sitename: [
            { required: true, message: '请输入站点名称', trigger: 'blur' }
          ],
          closeReson: [
            { required: true, message: '请填写站点关闭原因', trigger: 'blur' }
          ],
          logo: [
            { required: true, validator: checkImg, bindKey: 'logo', message: '请上传平台LOGO~!', trigger: 'change' }
          ],
          bgimg: [
            { required: true, validator: checkImg, bindKey: 'bgimg', message: '请上传网站图标~!', trigger: 'change' }
          ],
          copyright: [
            { required: true, message: '请输入网站版权', trigger: 'blur' }
          ]
        }
      }
    }
  },
  methods: {
    saveForm() {
      this.formFormatData.formData.copyright = this.defaultMsg
      this.formFormatSubmit()
    },
    agreenInfoChange(msg) {
      this.defaultMsg = msg
      // this.formFormatData.formData.setting.license.values.license = msg
    },
    formFormatCallBack(data, type) {
      if (type === 'editForm') {
        const { copyright } = data
        console.log(copyright)
        this.defaultMsg = copyright
      }
    },
    formFormatConfirm(msg) {
      if (msg === '0') {
        this.$confirm('确定关闭站点?', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.formFormatData.formData.sitestatus = msg
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
          this.formFormatData.formData.sitestatus = '1'
        })
      }
    }
  }
}
</script>
